<template>
    <div class="replay-box" v-loading="loading" element-loading-text="发送中" v-show="visible">
        <div class="replay-box-overlay" @click="handleClose"></div>
        <div class="replay-box-content">
            <div class="rb-hd">
                <h3 class="title">转发</h3>
            </div>
            <div class="rb-bd">
                <div class="selector">
                    <div class="contactor" v-for="(user, index) in selectList" :key="index">
                        <div class="avatar">
                            <template v-if="user.type == 'chat'">
                                <template v-if="user.sendType == 'friend'">
                                    <img class="img" :src="user.avatar?user.avatar:defaultUserIcon">
                                </template>
                                <template v-else>
                                    <group-avatar v-lazy-container="{ selector: 'img' }" :id="user.id"></group-avatar>
                                </template>
                            </template>
                            <template v-else-if="user.type == 'friend'">
                                <img class="img" :src="user.avatar?user.avatar:defaultUserIcon">
                            </template>
                            <template v-else>
                                <group-avatar v-lazy-container="{ selector: 'img' }" :id="user.id"></group-avatar>
                            </template>
                            <!--<img class="img" :src="user.avatar" v-if="user.avatar != ''">-->
                            <!--<img class="img" src="../../assets/person_icon.jpg" v-else-if="user.type == 'friend'">-->
                            <!--<img class="img" src="../../assets/group_icon.png" v-else>-->
                        </div>
                        <div class="opt" @click="handleDel(index)">
                            <i class="delete"></i>
                        </div>
                    </div>
                    <div class="input-box">
                        <icon class="s-icon" type="search" color="#9DA4B3" :size="24"></icon>
                        <input class="input" type="text" placeholder="搜索" v-model="search">
                    </div>
                </div>
                <div class="chooser" :class="{'choose2': selectList.length > 6}">
                    <el-scrollbar ref="replayBar" class="s-content" :native="false" :noresize="true" style="height: 100%">
                        <div class="contact-box" v-if="search.trim() == ''">
                            <div v-for="(item, index) in contactList" :key="index">
                                <template v-if="item.type == 'header'">
                                    <h4 class="contact-title">{{item.name}}</h4>
                                </template>
                                <template v-else-if="item.type == 'header-case'">
                                    <h4 class="contact-title" style="background: #fff;">{{item.name}}</h4>
                                </template>
                                <template v-else>
                                    <div class="contact-item" @click="handleSelect(item)">
                                        <div class="opt">
                                            <icon :type="isCheck(item.id) ? 'checkbox-active' : 'checkbox'" :color="isCheck(item.id) ? '#4288ff' : '#e7e6e6'" :size="20"></icon>
                                        </div>
                                        <div class="avatar">
                                            <template v-if="item.type == 'chat'">
                                                <template v-if="item.sendType == 'friend'">
                                                    <img class="img" :src="item.avatar?item.avatar:defaultUserIcon">
                                                </template>
                                                <template v-else>
                                                    <group-avatar v-lazy-container="{ selector: 'img' }" :id="item.id"></group-avatar>
                                                </template>
                                            </template>
                                            <template v-else-if="item.type == 'friend'">
                                                <img class="img" :src="item.avatar?item.avatar:defaultUserIcon">
                                            </template>
                                            <template v-else>
                                                <group-avatar v-lazy-container="{ selector: 'img' }" :id="item.id"></group-avatar>
                                            </template>
                                            <!--<img class="img" :src="item.avatar" v-if="item.avatar != ''">-->
                                            <!--<img class="img" src="../../assets/person_icon.jpg" v-else-if="item.type == 'friend'">-->
                                            <!--<img class="img" src="../../assets/group_icon.png" v-else>-->
                                        </div>
                                        <div class="info">
                                            <h4 class="nickname" v-html="getEmojiImg(item.name)"></h4>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="contact-box" v-else>
                            <div v-for="(item, index) in searchList" :key="index">
                                <template v-if="item.type == 'header'">
                                    <h4 class="contact-title">{{item.name}}</h4>
                                </template>
                                <template v-else-if="item.type == 'header-case'">
                                    <h4 class="contact-title" style="background: #fff;">{{item.name}}</h4>
                                </template>
                                <div v-else class="contact-item" @click="handleSelect(item)">
                                    <div class="opt">
                                        <icon :type="isCheck(item.id) ? 'checkbox-active' : 'checkbox'" :color="isCheck(item.id) ? '#4288ff' : '#e7e6e6'" :size="20"></icon>
                                    </div>
                                    <div class="avatar">
                                        <template v-if="item.type == 'chat'">
                                            <template v-if="item.sendType == 'friend'">
                                                <img class="img" :src="item.avatar?item.avatar:defaultUserIcon">
                                            </template>
                                            <template v-else>
                                                <group-avatar v-lazy-container="{ selector: 'img' }" :id="item.id"></group-avatar>
                                            </template>
                                        </template>
                                        <template v-else-if="item.type == 'friend'">
                                            <img class="img" :src="item.avatar?item.avatar:defaultUserIcon">
                                        </template>
                                        <template v-else>
                                            <group-avatar v-lazy-container="{ selector: 'img' }" :id="item.id"></group-avatar>
                                        </template>
                                        <!--<img class="img" :src="item.avatar" v-if="item.avatar != ''">-->
                                        <!--<img class="img" src="../../assets/person_icon.jpg" v-else-if="item.type == 'friend'">-->
                                        <!--<img class="img" src="../../assets/group_icon.png" v-else>-->
                                    </div>
                                    <div class="info">
                                        <template v-if="item.type == 'friend'">
                                            <!--exist remark-->
                                            <template v-if="item.remark">
                                                <template v-if="item.remark.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) != -1">
                                                    <h4 class="nickname" v-html="highLight(item.remark)"></h4>
                                                </template>
                                                <template v-else>
                                                    <div class="nickname" v-html="highLight(item.remark)"></div>
                                                    <span class="nickname" style="font-size: 12px;color: #9DA4B3;">
                                                    <span>昵称：</span>
                                                    <span v-html="highLight(item.nickname)"></span>
                                                </span>
                                                </template>
                                            </template>
                                            <!--no exist remark-->
                                            <template v-else>
                                                <h4 class="nickname" v-html="highLight(item.nickname)"></h4>
                                            </template>
                                        </template>
                                        <template v-else>
                                            <h4 class="nickname" v-html="highLight(item.name)"></h4>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="rb-ft">
                <a style="cursor: pointer;" class="button" :class="selectList.length > 0 ? 'primary' : 'disable'" @click="handleConfirm">确定<span v-if="selectList.length > 0">({{selectList.length}})</span></a>
            </div>
            <div class="close" @click="handleClose"><icon type="close" color="#000" :size="22"></icon></div>
        </div>
    </div>
</template>
<script>
import icon from '@/components/icon/index'
import defaultUserIcon from '../../assets/person_icon.jpg'
import groupAvatar from '@/components/group-avatar/index'
import utils from '@/utils/common'
import emoji from '@/utils/emoji'

export default {
    data() {
        return {
            defaultUserIcon: defaultUserIcon,
            search: '',
            selectList: [],
            loading: false
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        msg: {
            type: Object,
            default: null
        }
    },
    computed: {
        contactList() {
            let list = []
            let chatList = this.$store.state.chat.chatList
            let friendList = this.$store.state.base.friendList
            let groupList = this.$store.state.base.groupList
            if (chatList && chatList.length > 0) {
                list.push({
                    type: 'header',
                    name: '最近的聊天'
                })
                chatList.forEach(el => {
                    list.push({
                        type: 'chat',
                        id: el.id,
                        avatar: el.icon,
                        name: el.name,
                        sendType: el.msgType == 11 ? 'friend' : 'group'
                    })
                })
            }

            if (friendList) {
                list.push({
                    type: 'header',
                    name: '好友'
                })
                for (let key in friendList) {
                    list.push({
                        type: 'header-case',
                        name: key.toUpperCase()
                    })
                    friendList[key].forEach(el => {
                        list.push({
                            type: 'friend',
                            id: el.id,
                            avatar: el.usericon,
                            name: el.remark == '' ? el.nickname : el.remark,
                            nickname: el.nickname,
                            remark: el.remark,
                            sendType: 'friend'
                        })
                    })
                }
            }

            if (groupList && groupList.length > 0) {
                list.push({
                    type: 'header',
                    name: '群聊'
                })
                groupList.forEach(el => {
                    list.push({
                        type: 'group',
                        id: el.id,
                        avatar: el.group_icon,
                        name: el.group_name,
                        sendType: 'group'
                    })
                })
            }
            return list
        },
        searchList() {
            let list = []
            let key = this.search.trim()
            list = this.contactList.filter(el => {
                if (el.type == 'friend') {
                    return el.remark.toLocaleLowerCase().indexOf(key.toLocaleLowerCase()) != -1 || el.nickname.toLocaleLowerCase().indexOf(key.toLocaleLowerCase()) != -1
                } else if (el.type == 'group') {
                    return el.name.toLocaleLowerCase().indexOf(key.toLocaleLowerCase()) != -1 && el.type != 'header'
                } else if (el.type == 'header') {
                    if (el.name == '最近的聊天') {
                        return false
                    } else {
                        return true
                    }
                } else {
                    return false
                }
            })
            if (list.length > 2) {
                let friendArr = list.filter(el => {
                    return el.type == 'friend'
                })
                if (friendArr.length == 0) {
                    list = list.filter(el => {
                        return el.name != '好友'
                    })
                }

                let groupArr = list.filter(el => {
                    return el.type == 'group'
                })
                if (groupArr.length == 0) {
                    list = list.filter(el => {
                        return el.name != '群聊'
                    })
                }
                return list
            } else {
                return []
            }
        }
    },
    components: {
        icon,
        groupAvatar
    },
    methods: {
        highLight(name) {
            if (this.search.trim()) {
                var reg = new RegExp(this.search.trim(), 'gi')
                name = name.replace(reg, function (txt) {
                    return '<span style="color: #4288FF;">' + txt + '</span>'
                })
            }
            return name
        },
        isCheck(id) {
            let status = false
            let length = this.selectList.filter(el => { return el.id == id }).length
            if (length > 0) {
                status = true
            } else {
                status = false
            }
            return status
        },
        handleSelect(res) {
            let index = utils.chartListFilter(res.id, this.selectList)
            if (index == -1) {
                this.selectList.push(res)
            } else {
                this.selectList.splice(index, 1)
            }
        },
        handleDel(index) {
            this.selectList.splice(index, 1)
        },
        handleConfirm() {
            this.loading = true
            this.selectList.forEach(el => {
                this.sendMessage(el.id, el.sendType == 'friend' ? 11 : 13)
            })
            this.loading = false
            this.handleClose('confirm')
        },
        handleClose(type) {
            this.search = ''
            this.selectList = []
            if (!type) {
                this.$store.dispatch('updateIsReplyMsg', false)
            }
            this.$emit('close')
        },
        sendMessage(id, msgType) {
            // let seqAutoInc = this.$store.state.chat.seqAutoInc
            let params = {
                msgType: msgType,
                token: '',
                id: id.toString(),
                data: {
                    stage: 1,
                    msg: this.msg.msg,
                    contentType: this.msg.contentType,
                    msgId: utils.getTimestamp()
                }
            }
            this.$socket.send(params)
            // this.$store.dispatch('updateSeqAutoInc', seqAutoInc + 1)
        },
        getEmojiImg(str) {
            return emoji.transToEmojiImg(str)
        }
    },
    updated() {
        if (this.$refs['replayBar']) {
            this.$refs['replayBar'].update()
        }
    }
}
</script>

<style lang="less" scoped>
.replay-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    .replay-box-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.4);
        -webkit-backface-visibility: hidden;
        animation: b .1s;
    }
    .replay-box-content {
        position: relative;
        background: #fff;
        color: #444;
        margin: 0 auto;
        max-width: 100%;
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
        width: 480px;
        height: 600px;
        .rb-hd {
            .title {
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                margin-bottom: 0;
                line-height: 50px;
                background-color: #f9f9f9;
            }
        }
        .rb-bd {
            .selector {
                max-height: 110px;
                overflow-y: auto;
                position: absolute;
                min-height: 60px;
                left: 0;
                right: 0;
                z-index: 999;
                background-color: #fff;
                padding: 10px 0 0 20px;
                .contactor {
                    float: left;
                    position: relative;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    .avatar {
                        .img {
                            display: block;
                            width: 40px;
                            height: 40px;
                        }
                    }
                    .opt {
                        display: none;
                        position: absolute;
                        cursor: pointer;
                        top: -12px;
                        right: -8px;
                        .delete {
                            display: inline-block;
                            vertical-align: middle;
                            width: 19px;
                            height: 19px;
                            background: url('../../assets/del_icon.png') no-repeat;
                            background-size: cover;
                        }
                    }
                    &:hover {
                        .opt {
                            display: block;
                        }
                    }
                }
                .input-box {
                    margin-bottom: 10px;
                    position: relative;
                    float: left;
                    .s-icon {
                        margin: 6px;
                    }
                    .input {
                        border: 0;
                        font-size: 16px;
                        width: 5em;
                        line-height: 40px;
                        height: 40px;
                    }
                }
                &:after {
                    content: " ";
                    visibility: hidden;
                    display: block;
                    height: 0;
                    clear: both;
                }
            }
            .chooser {
                margin: 0 20px;
                padding-top: 60px;
                height: 460px;
                &.choose2 {
                    padding-top: 120px;
                    overflow: auto;
                }
                .contact-box {
                    .contact-title {
                        background: #f8f8f8;
                        font-weight: 400;
                        font-size: 13px;
                        padding: 0 18px;
                        line-height: 25px;
                    }
                    .contact-item {
                        overflow: hidden;
                        padding: 7px 20px;
                        cursor: pointer;
                        border-bottom: 1px solid #f2f2f2;
                        .opt {
                            float: left;
                            margin-right: 10px;
                            line-height: 40px;
                        }
                        .avatar {
                            float: left;
                            margin-right: 10px;
                            .img {
                                display: block;
                                width: 40px;
                                height: 40px;
                                border-radius: 2px;
                            }
                        }
                        .info {
                            overflow: hidden;
                            .nickname {
                                font-weight: 400;
                                font-size: 13px;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                            }
                        }
                    }
                }
            }
        }
        .rb-ft {
            padding-top: 20px;
            text-align: center;
            .button {
                display: inline-block;
                font-size: 14px;
                width: 190px;
                text-align: center;
                color: #fff;
                text-decoration: none;
                border-radius: 4px;
                &.primary {
                    background-color: #4288ff;
                    line-height: 42px;
                }
                &.disable {
                    border: 1px solid #c1c1c1;
                    background-color: #c9c9c9;
                    line-height: 40px;
                }
            }
        }
        .close {
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 14px;
            right: 14px;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            display: inline-block;
        }
    }
    * {
        box-sizing: border-box;
    }
    @keyframes b {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
}
</style>
